<template>
  <div>
    <el-dialog :visible.sync="visible" :close-on-click-modal="false" :append-to-body="true" title="导入" width="30%" height="500px" :before-close="handleClose">
      <div class="flex flex-x-top">
        <div style="width: 50px">
          <div>文件</div>
        </div>
        <el-upload
          ref="upload"
          :show-file-list="true"
          class="ml-20"
          action
          :auto-upload="false"
          :http-request="UploadFile"
          :before-upload="onBeforeUpload"
          :file-list="uploadObj.files"
          accept=".csv, .xlsx, .xls"
          :on-success="excelUploadSuccessed"
          :before-remove="() => false"
        >
          <el-button type="primary" size="small">点击上传</el-button>
        </el-upload>
      </div>
      <div class="el-upload__text upload-text mt-20">点击或将文件拖拽到这里上传</div>
      <div class="el-upload__text upload-intro mt-20">文件格式：.csv, .xlsx, .xls</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="SubmitFile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { importDepartTemplate, importAddressTemplate } from '@/api/projectManagement'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      types: {
        type: String,
        default: 'depart',
      },
    },
    data() {
      return {
        uploadObj: new FormData(),
      }
    },
    computed: {},
    methods: {
      async SubmitFile() {
        this.$refs.upload.submit()
        if (this.types === 'depart') {
          const res = await importDepartTemplate(this.uploadObj)
          if (res.status == 0) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        } else if (this.types === 'address') {
          const res = await importAddressTemplate(this.uploadObj)
          if (res.status == 0) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        }
        this.uploadObj = null
        this.uploadObj = new FormData()
        this.uploadObj.files = []
        this.$emit('updateList')
        this.$emit('update:visible', false)
      },
      UploadFile(file) {
        this.uploadObj.append('file', file.file)
        this.uploadObj.append('updateSupport', true)
      },
      excelUploadSuccessed() {
        this.$message.success('导入成功')
        this.$emit('updateList')
        this.$emit('update:visible', false)
      },
      onBeforeUpload(file) {
        const isCSV = file.type === 'csv,' || 'xlsx' || 'xls'
        if (!isCSV) {
          this.$message.error('文件格式不正确!')
        }
      },

      handleClose() {
        this.$emit('update:visible', false)
        // 关闭弹窗清空已存在的参数及已上传的文件列表
        this.uploadObj = null
        this.uploadObj = new FormData()
        this.uploadObj.files = []
      },
    },
  }
</script>
<style lang="scss" scoped>
  .import-dialog {
    box-sizing: border-box;
    width: 350px;
    height: 160px;
  }
  .endTxt {
    color: #ff3466;
    p {
      padding-bottom: 10px;
    }
  }
</style>
